var bus = new Vue();
Vue.component('DkWxCheckCoupon', {
    data() {
        return {
            value: '',
            couponData: null,
            showCouponWind: false
        }
    },
    mounted() {
        bus.$on('closeCouponWind', () => {
            this.showCouponWind = false
        })
    },
    methods: {
        onSubmit() {
            if (!this.value) {
                this.$toast('卡券核销码不能为空')
            }
            dk.post('/h5/CheckCoupon/getCoupon', {key: this.value}).then(res => {
                console.log(res)
                if (res.code === -1) {
                    this.$toast(res.msg)
                } else {
                    this.couponData = res.data
                    this.showCouponWind = true
                }
            })
        }
    },
    template: `
    <div>
      <div class="check-coupon">
    <van-form @submit="onSubmit">
      <van-field v-model="value" label="核销码" placeholder="请填写核销码" />
      <div style="margin: 16px;">
        <van-button round block type="info">核销</van-button>
      </div>

    </van-form>
          <div style="margin: 16px;">
        <van-button round block type="primary">扫一扫</van-button>
      </div>
  </div>
   <van-popup v-model="showCouponWind" round style="width: 80%;max-height: 80vh ">
 <DkWxCouponWin :couponData="couponData"></DkWxCouponWin>
</van-popup>

</div>
    `
})

Vue.component('getCheckCouponUserList', {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            page: 1,
            size: 5,
            cid: 0,
            showCouponWind: false,
            couponData: null
        }
    },
    props: {
        screenData: {
            default: {},
            type: Object
        },
    },
    mounted() {
        bus.$on('onRefresh', () => {
            this.onRefresh()
        })
        bus.$on('closeCouponWind', () => {
            this.showCouponWind = false
        })
    },
    methods: {
        getList() {
            dk.post("/h5/CheckCoupon/getCouponList", {page: this.page, screenData: this.screenData}).then(res => {
                console.log(res)
                for (let i = 0; i < res.data.length; i++) {
                    const element = res.data[i];
                    this.list.push(element);
                }
                this.loading = false;
                this.refreshing = false;
                this.page++
                if (this.list.length >= res.msg || res.data.length === 0) {
                    this.finished = true;
                }
            })
        },
        onLoad() {
            this.getList()
        },
        onRefresh() {
            // 清空列表数据
            this.list = []
            this.page = 1
            this.finished = false;
            this.loading = true;
            this.onLoad();
        },
        handleClick(item) {
            this.couponData = item
            this.showCouponWind = true
        }
    },
    template: `
    <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="checklist">
    <ul>
        <li v-for="(item,key) in list" :key="key" class="cl" @click="handleClick(item)">

            <div class="user z">
                <img :src="item.user.avatar" alt="">
                <div class="van-ellipsis">{{item.user.nickname}}</div>
            </div>
            <div class="coupon z">
                <p class="exchange_code">{{item.key}}</p>
                <p class="van-ellipsis">{{item.name}}</p>
            </div>
            <div class="datetime y">
                <div v-if="item.status == 0">
                    <p>
                        <van-tag round type="success">未核销</van-tag>
                    </p>
                    <p class="time van-ellipsis">{{item.end_time}}</p>
                </div>
                <div v-if="item.status == 1">
                    <p>
                        <van-tag round type="danger">已核销</van-tag>
                    </p>
                    <p class="time van-ellipsis">{{item.check_time}}</p>
                </div>
                <div v-if="item.status == -1">
                    <p>
                        <van-tag round color="#999">已过期</van-tag>
                    </p>
                    <p class="time van-ellipsis">{{item.endtime}}</p>

                </div>
            </div>
            <div class="coupon_count" v-if="item.number>0">
                <van-tag round type="danger">x{{item.number}}</van-tag>
            </div>
        </li>
    </ul>
</van-list>
 <van-popup v-model="showCouponWind" round style="width: 80%;max-height: 80vh ">
 <DkWxCouponWin :couponData="couponData"></DkWxCouponWin>
</van-popup>
</div>

    `
})

Vue.component('DkWxCheckCouponList', {
    data() {
        return {
            active: 0,
            screenData: {
                type: 0,
                sort: 0,
                active: 0
            }
        }
    },
    watch: {
        active(val) {
            this.screenData.active = val
        }
    },
    methods: {},
    template: `
    <div>
      <div class="check-coupon-list">
    <van-tabs v-model="active">
      <van-tab title="未核销">
            <getCheckCouponUserList :screenData="screenData" ></getCheckCouponUserList>
      </van-tab>
      <van-tab title="已核销">
            <getCheckCouponUserList :screenData="screenData" ></getCheckCouponUserList>
      </van-tab>
      <van-tab title="已过期">
            <getCheckCouponUserList :screenData="screenData" ></getCheckCouponUserList>
      </van-tab>
    </van-tabs>
  </div>
</div>
    `
})

Vue.component('DkWxCouponWin', {
    props: {
        couponData: {
            default: {},
            type: Object
        }
    },
    methods: {
        copySuccess() {
            this.$toast.success('复制成功')
        },
        onSubmitCheckExchangeCode(key) {
            dk.post('/h5/CheckCoupon/check', {key: key}).then(res => {
                console.log(res)
                if (res.code === -1) {
                    this.$toast(res.msg)
                } else {
                    this.$toast(res.msg)
                    bus.$emit('onRefresh')
                    bus.$emit('closeCouponWind')
                }
            })
        }
    },
    template: `
            <div style="padding: 10px;">
            <h3 style="font-size: 16px;font-weight: 500;padding: 10px 0px;text-align: center;">卡券信息</h3>
            <van-cell-group style="height: 60vh;overflow: auto">
                <van-cell title="用户名" :value="couponData.user.nickname" ></van-cell>
<!--                <van-cell title="真实姓名" :value="couponData.user.truename"  ></van-cell>-->
                <van-cell title="兑换码" :value="couponData.key" v-clipboard:copy="couponData.key" v-clipboard:success="copySuccess">
                    <template #title>
                        <span class="custom-title">兑换码</span>
<!--                        <van-tag :type="couponData.time_state.type">{{couponData.time_state.name}}</van-tag>-->
                        <van-tag type="primary" v-if="couponData.number>0">x{{couponData.number}}</van-tag>
                    </template>
                </van-cell>
<!--                <van-cell title="电话" :value="couponData.user.phone" :url="'tel://'+couponData.user.phone"></van-cell>-->
<!--                <van-cell title="地址" :value="couponData.user.address" v-clipboard:copy="couponData.user.address" v-clipboard:success="copySuccess"></van-cell>-->
                <van-cell title="获得时间" :value="couponData.create_time"></van-cell>
                <van-cell title="开始时间" :value="couponData.start_time"></van-cell>
                <van-cell title="到期时间" :value="couponData.end_time"></van-cell>
                <van-cell title="核销时间" :value="couponData.check_time" v-if="couponData.check_id>0"></van-cell>
<!--                <van-cell title="核销员" :value="couponData.checker.nickname"  v-if="couponData.check_id>0"></van-cell>-->
            </van-cell-group>
            <div style="" >
                <van-button :disabled="couponData.status!=0" type="primary" block size="small" @click="onSubmitCheckExchangeCode(couponData.key)">核销</van-button>
            </div>
        </div>
`
})